<template>
  <view class="mine-view">
    <view class="mine-form">
      <view class="view-circle">
        <image src="/static/pc/pcresult.png" class="image-icon"></image>
      </view>
      <view class="form-type">进取型(C5)</view>
      <view class="form-result"
        >您的测评结果<span style="color: #ff0000; font-size: 20px">91</span>
        分</view
      >
      <view class="form-but">
        <view>高风险(R5级)</view>
      </view>
      <el-button class="button-view" type="primary">重新评估</el-button>
      <el-divider class="view-divider"
        ><span class="text">推荐项目</span></el-divider
      >
      <view class="view-ProjectItem">
        <PCProjectItem></PCProjectItem>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {};
  },
  created() {},
  mounted() {
  },
  methods: {
  },
};
</script>

<style scoped lang="scss">
.mine-view {
  width: 100%;
  background: white;
  padding: 108px 40px 219px 40px;
  min-height: 610px;
  .mine-form {
    text-align: center;
    .view-circle {
      margin: auto;
      width: 139px;
      height: 139px;
      border: 8px solid #eee1d6;
      border-radius: 50%;
      @extend .row;
      //   border-image: linear-gradient(
      //         318deg,
      //         rgba(255, 170, 47, 1),
      //         rgba(255, 38, 21, 1)
      //       ) 8 8;
      .image-icon {
        width: 62px;
        height: 62px;
      }
    }
    .form-type {
      margin-top: 36px;
      font-weight: 600;
      font-size: 22px;
      color: #522b00;
    }
    .form-result {
      font-weight: 400;
      font-size: 16px;
      color: #2c1101;
      margin-top: 10px;
    }
    .form-but {
      margin: auto;
      margin-top: 14px;
      width: 130px;
      height: 28px;
      background: #fff4f3;
      border-radius: 14px;
      padding: 4px 14px;
      @extend .row;
      color: #ff3c2d;
      font-size: 14px;
    }
    .button-view {
      margin-top: 27px;
      width: 320px;
      height: 50px;
      background: #ff453b;
      border-radius: 8px;
      border: none;
    }
    .view-divider {
      margin: auto;
      width: 590px;
      margin-top: 80px;
      background: #e8ded6;
      .el-divider__text {
        padding: 0;
      }
      .text {
        padding: 0 12px;
        font-weight: 600;
        font-size: 20px;
        color: #2c1101;
        position: relative;
        &:before {
          top: 11px;
          left: 0px;
          position: absolute;
          display: block;
          width: 6px;
          height: 6px;
          border-radius: 50%;
          background: #e8ded6;
          content: "";
        }
        &:after {
          top: 11px;
          right: 0px;
          position: absolute;
          display: block;
          width: 6px;
          height: 6px;
          border-radius: 50%;
          background: #e8ded6;
          content: "";
        }
      }
    }
    .view-ProjectItem {
      margin: auto;
      margin-top: 43px;
      width: 605px;
      height: 212px;
    }
  }
}
</style>